<template>
	<view class="team">
		<view class="city" @click="show">
			{{ order_arsName }}
			<uni-icons type="arrowright" size="20" style=" color: #87888a;float: right;"></uni-icons>
			<wyb-popup ref="popup" type="bottom" height="200" width="500" radius="6">
				<view class="popup-content">
					<view v-for="(i,indexs) in areaListArr" :class="index==indexs?'popitem popActive':'popitem'" @click="tab(indexs)">
						{{ areaListArr[indexs] }}
						<uni-icons type="checkmarkempty" v-if="index==indexs" size="20" style=" color: #0e7fff;float: right;"></uni-icons>
					</view>
				</view>
			</wyb-popup>
		</view>
		<view class="people">
			<view class="left">共计<text>{{ myTeamData.num }}</text>人</view>
			<view class="right" @click="new_add">新增人员</view>
		</view>
		<!-- <mescroll-body> -->
			<view class="list">
				<view class="listItem" v-if="myTeamData.server_list.length != ''" v-for="(item,index) in myTeamData.server_list" :key="index" @click="goDetail(item.sp_id)">
					<image :src="item.imgurl" mode=""></image>
					<view class="msg">
						<view class="name">
							{{ item.person_name }}
							<uni-icons type="arrowright" size="14" style=" color: #87888a;float: right;"></uni-icons>
						</view>
						<view class="lv">
							<text class="one">好评率</text>
							<text class="two">{{ item.hp_rate }}%</text>
							<text class="three">{{ item.working }}经验</text>
						</view>
						<view class="fuwu">
							<view class="fuwuItem" v-for="(item_1,index) in item.bind_serve" :key="index">
								<view class="mingcheng">
									{{item_1}}
								</view>
							</view>

						</view>
					</view>
				</view>
				<view class="null" v-if="myTeamData.server_list.length == ''">
					<image class="null_img" src="../../static/img/null_tj.png" mode=""></image>
					<view>暂无数据</view>
				</view>
			</view>
			

		<!-- </mescroll-body> -->
	</view>
</template>

<script>
	import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
	export default {
		components: {
			wybPopup
		},
		data() {
			return {
				areaListArr:[],
				areaListArr2:[],
				order_regionID:'',
				order_arsName:'',
				myTeamData:{
					server_list:[]
				},
				index: 0,
			}
		},
		methods: {
			areaList(){//获取区域列表
				this.$store.dispatch("areaList").then(res=>{
					if(res.code==1){
						console.log(res)
						this.areaListArr = Object.values(res.data.area_list)
						this.areaListArr2 = Object.keys(res.data.area_list)
						this.order_regionID = this.areaListArr2[0]
						this.order_arsName = this.areaListArr[0]
						this.myTeam(this.order_regionID);
					}
				})
			},
			myTeam(qu_id){
				this.$store.dispatch('myTeam',{qu_id:qu_id}).then(res=>{
					if(res.code==1){
					    console.log(res)
						this.myTeamData = res.data;
						this.$refs.popup.close();
					}else{
						uni.navigateTo({
						   url:'./choiceservice?uid=' + res.data.info.uid
						});
					}
				})
			},
			
			tab(e) {
				this.index = e
				this.order_regionID = this.areaListArr2[e]
				this.order_arsName = this.areaListArr[e]
				console.log(this.order_regionID)
				this.myTeam(this.order_regionID);
			},
			show() {
				this.$refs.popup.show()
			},
			goDetail(e) {
				uni.navigateTo({
					url: '../../component/fuwuDetail/index?sp_id=' + e
				})
			},
			// 新增人员
			new_add(){
				uni.navigateTo({
					url: '../../component/editFuwu/index'
				})
			}
		},
		mounted() {
			this.areaList()
			uni.$on('addyes',(res=>{
				this.areaList()
			}))
		},
	}
</script>

<style lang="scss" scoped>
	.team {
		.city {

			padding: 0 20upx;
			line-height: 80upx;
			font-size: 28upx;
			background: white;
		}

		.popitem {
			line-height: 70upx;
			padding: 0 10px;
			font-size: 30upx;
		}

		.popActive {
			color: #0e7fff;
		}

		.people {
			padding: 20upx;
			display: flex;
			justify-content: space-between;


			.left {
				color: #a4a8b7;
				font-size: 28upx;

				text {
					margin: 0 10upx;
					color: black;
					font-size: 36upx;
					font-weight: 550;
				}
			}

			.right {
				width: 136upx;
				font-size: 24upx;
				text-align: center;
				line-height: 52upx;
				border-radius: 30upx;
				background: white;
				color: #0077ff;
				border: 2upx solid #0077ff;
				margin-left: 40upx;
			}
		}

		.list {
			
			
			.null{
				text-align:center;
				margin-top:100upx;
				.null_img{
					
					width:492upx;
					height:492upx;
				}
				view{font-size:28upx;color:#929292;}
			}
			.listItem {
				background: white;
				display: flex;
				padding:20upx 20upx 0;
				image {
					width: 88upx;
					height: 88upx;
					border-radius: 50%;
				}

				.msg {
					margin-left: 20upx;
					width: calc(100% - 110upx);
					padding-bottom: 6upx;
					border-bottom:3upx solid #eee;

					.name {
						font-size: 32upx;
						font-weight: 550;

					}

					.lv {
						font-size: 28upx;
						margin-top: 10upx;
						color: #a4a8b7;

						.one {
							margin-right: 10upx;
						}

						.two {
							margin-right: 60upx;
						}
					}

					.fuwu {
						margin-top: 20upx;
						display:flex;
						flex-wrap: wrap;
						.fuwuItem {
							width:50%;
							display: flex;
							justify-content: space-between;
							
							.mingcheng {
								margin-bottom: 10upx;
								width: 49%;
								font-size: 28upx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}
					}
				}

			}
		}
	}
</style>
